<template>
  <div class="container">
    <div class="ellipse">
      <div class="ellipse_details">
        <div class="user_pic"><img :src="user_info.headurl || '/static/imgs/system_user.png'" alt=""></div>
        <div class="user_info">
          <label class="user_name">{{user_info.name}}</label>
          <label class="user_position">{{user_info.zhichengname}}·{{user_info.jobname}}</label>
        </div>
      </div>
    </div>
    <!-- <div class="header flex">
      <span class="user_pic"><img :src="user_info.headurl || '/static/imgs/system_user.png'" alt=""></span>
      <div class="user_info flex-item">
        <label class="user_name">{{user_info.name}}</label>
        <label class="user_position">{{user_info.zhichengname}}·{{user_info.jobname}}</label>
      </div>
    </div> -->

    <!-- <div class="check_tab flex">
      <div class="tab_details flex-item" @tap="goAttendance">
        <span class="tab_icons"></span>
        <span class="tab_words">出勤记录</span>
      </div>
      <div class="tab_details flex-item" @tap="goSalary">
        <span class="tab_icons"></span>
        <span class="tab_words">工资明细</span>
      </div>
      <div class="tab_details flex-item" @tap="goViewCustomers">
        <span class="tab_icons"></span>
        <span class="tab_words">查看客户（{{guestnum}}人）</span>
      </div>
    </div> -->
    <div class="panel" v-if="shopid != 0" style="margin-top:0;">
      <div class="panel_title">业绩情况</div>
      <div class="radiochoose flex">
        <!-- <van-radio-group :value="radio" @change="onradioChange">
          <van-radio name="1">本月（上月）</van-radio>
          <van-radio name="2">本年（上年）</van-radio>
        </van-radio-group> -->
        <radio-group class="radio-group" @change="onradioChange">
          <label class="radio" v-for="(item,index) in radioitems" :key="item.value" :data-index="index">
            <radio :value="item.value" :checked="item.value === radio ? true : false" />
            {{item.name}}
          </label>
        </radio-group>
      </div>
    </div>
    <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" @touchstart="touchHandler" v-if="shopid != 0"></canvas>

    <div class="check_tab flex">
      <div class="tab_details flex-item" @tap="goAttendance">
        <span class="tab_icons cqjl"></span>
        <span class="tab_words">出勤记录</span>
      </div>
      <div class="tab_details flex-item" @tap="goSalary">
        <span class="tab_icons gzmx"></span>
        <span class="tab_words">工资明细</span>
      </div>
      <div class="tab_details flex-item" @tap="goViewCustomers">
        <span class="tab_icons fwkh"></span>
        <span class="tab_words">服务客户（{{guestnum}}人）</span>
      </div>
    </div>
    <div class="panel">
      <div class="panel_header"><span class="shu"></span>出勤数据</div>
      <ul class="panel_ul flex">
        <li class="flex-item">
          <span class="right" v-if="userdata.todaywork == 0">缺勤</span>
          <span class="right" v-if="userdata.todaywork == 1">出勤</span>
          <span class="right" v-if="userdata.todaywork == 2">请假</span>
          <span class="right" v-if="userdata.todaywork == 3">休息</span>
          <span class="right" v-if="userdata.todaywork == 4">完勤</span>
          <span class="right" v-if="userdata.todaywork == 5">调休</span>
          <span class="right" v-if="userdata.todaywork == 6">加班</span>
          <span class="left">今日考勤</span>
        </li>
        <li class="flex-item">
          <span class="right">{{userdata.monthworknum}}天</span>
          <span class="left">本月考勤</span>
        </li>
        <li class="flex-item">
          <span class="right">{{userdata.yearworknum}}天</span>
          <span class="left">年度考勤</span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="panel_header"><span class="shu"></span>工资数据</div>
      <ul class="panel_ul flex">
        <li class="flex-item">
          <span class="right">￥{{userdata.todaymoney}}元</span>
          <span class="left">今日提成</span>
        </li>
        <li class="flex-item">
          <span class="right">￥{{userdata.monthmoney}}元</span>
          <span class="left">本月工资</span>
        </li>
        <li class="flex-item">
          <span class="right">￥{{userdata.yearmoney}}元</span>
          <span class="left">年度工资</span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="panel_header"><span class="shu"></span>规划业绩-<span v-if="userdata.floor == 0">[门店]</span><span v-if="userdata.floor == 1">[门店]</span><span v-if="userdata.floor == 2">[部门]</span><span v-if="userdata.floor == 3 && userdata.ismanage == 1">[小组]</span><span v-if="userdata.floor == 3 && userdata.ismanage == 0">[个人]</span></div>
      <ul class="panel_ul flex">
        <li class="flex-item">
          <span class="right">{{userdata.todayplan}}条</span>
          <span class="left">今日规划</span>
        </li>
        <li class="flex-item">
          <span class="right">{{userdata.monthplan}}条</span>
          <span class="left">本月规划</span>
        </li>
        <li class="flex-item">
          <span class="right">{{userdata.yearplan}}条</span>
          <span class="left">年度规划</span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="panel_header"><span class="shu"></span>完成业绩-<span v-if="userdata.floor == 0">[门店]</span><span v-if="userdata.floor == 1">[门店]</span><span v-if="userdata.floor == 2">[部门]</span><span v-if="userdata.floor == 3 && userdata.ismanage == 1">[小组]</span><span v-if="userdata.floor == 3 && userdata.ismanage == 0">[个人]</span></div>
      <ul class="panel_ul flex">
        <li class="flex-item" @tap="goserviceguest(userdata.todayxianjin,1,1)">
          <span class="right">￥{{userdata.todayxianjin}}元</span>
          <span class="left">今日业绩</span>
        </li>
        <li class="flex-item" @tap="goserviceguest(userdata.monthxianjin,2,1)">
          <span class="right">￥{{userdata.monthxianjin}}元</span>
          <span class="left">本月业绩</span>
        </li>
        <li class="flex-item" @tap="goserviceguest(userdata.yearxianjin,3,1)">
          <span class="right">￥{{userdata.yearxianjin}}元</span>
          <span class="left">年度业绩</span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="panel_header"><span class="shu"></span>卡耗业绩-<span v-if="userdata.floor == 0">[门店]</span><span v-if="userdata.floor == 1">[门店]</span><span v-if="userdata.floor == 2">[部门]</span><span v-if="userdata.floor == 3 && userdata.ismanage == 1">[小组]</span><span v-if="userdata.floor == 3 && userdata.ismanage == 0">[个人]</span></div>
      <ul class="panel_ul flex">
        <li class="flex-item" @tap="goserviceguest(userdata.todayxianjin,1,2)">
          <span class="right">￥{{userdata.todaykahao}}元</span>
          <span class="left">今日卡耗</span>
        </li>
        <li class="flex-item" @tap="goserviceguest(userdata.monthxianjin,2,2)">
          <span class="right">￥{{userdata.monthkahao}}元</span>
          <span class="left">本月卡耗</span>
        </li>
        <li class="flex-item" @tap="goserviceguest(userdata.yearxianjin,3,2)">
          <span class="right">￥{{userdata.yearkahao}}元</span>
          <span class="left">年度卡耗</span>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import moment from 'moment'
import wxCharts from '@/utils/wxcharts'
let lineChart = null;
export default {
  data () {
    return {
      date: {
        year: '',
        month: ''
      },
      userInfo: {
        user_id: '',
        floor: '',
        ismanage: '',
        orcode: '',
        jsonshop: '',
        departmentid: '',
        departmentname: '',
        datatype: 1
      },
      textarea: '',
      shenhe: false,
      userid: 0,
      user_info: '',
      userdata: '',
      time_start: '',
      time_end: '',
      time_end2: '',
      start_time_js: '',
      end_time_js: '',
      radio: '1',
      categories: ['本月', '上个月'],
      shopid: 0,
      nowDay: '',
      nowMonth: '',
      nowYear: '',
      lastMonth: '',
      lastYear: '',
      nearHalfTime: '',
      lastHalfTime: '',
      nowDate: '',
      guestnum: 0,
      radioitems: [
        { name: '本月（上月）', value: '1', checked: 'true' },
        { name: '本年（上年）', value: '2' }
      ]
    }
  },

  components: {
  },
  async onLoad (option) {
    this.userid = wx.getStorageSync('params_userid')
    // 获取时间
    console.log(this.categories)
    let now = new Date(); // 当前日期
    console.log(now)
    this.nowDay = now.getDate(); // 当前日
    this.nowMonth = now.getMonth(); // 当前月
    this.nowYear = now.getYear(); // 当前年
    this.nowYear += (this.nowYear < 2000) ? 1900 : 0;
    let lastMonthDate = new Date(); // 上月日期
    lastMonthDate.setDate(1);
    lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
    this.lastYear = lastMonthDate.getYear();
    this.lastYear += (this.lastYear < 2000) ? 1900 : 0;
    this.lastMonth = lastMonthDate.getMonth();
    this.nearHalfTime = moment().subtract(6, 'months').format('YYYY-MM-DD'); // 当前时间的前6个月时间
    this.lastHalfTime = moment().subtract(12, 'months').format('YYYY-MM-DD'); // 当前时间的前6个月时间
    this.nowDate = moment().format('YYYY-MM-DD')
    await Promise.all([
      this.getshopid(),
      this.getUserinfo(),
      this.getworkerchanzhiinfo(),
      this.getuserdata(),
      this.getbasedata(),
      this.viewCustomers()
    ])
  },
  methods: {
    initChart (daysdata, newxianjindata, oldxianjindata) {
      /* eslint-disable */
      let that = this
      let windowWidth = 320
      try {
        const res = wx.getSystemInfoSync();
        const clientWidth = res.windowWidth;
        const rpxR = 750 / clientWidth
        windowWidth = 688 / rpxR
      } catch (e) {
        console.error('getSystemInfoSync failed!');
      }
      lineChart = new wxCharts({
        canvasId: 'lineCanvas',
        type: 'line',
        categories: daysdata,
        series: [{
          name: `${that.categories[0]}现金业绩`,
          data: newxianjindata,
          format: function (val) {
            return val.toFixed(2) + '元';
          }
        },
        {
          name: `${that.categories[1]}现金业绩`,
          data: oldxianjindata,
          format: function (val) {
            return val.toFixed(2) + '元';
          }
        }],
        // yAxis: {
        //   format: function (val) {
        //     return val + '元';
        //   }
        // },
        width: windowWidth,
        height: windowWidth / 1.72,
        dataLabel: false,
        dataPointShape: true
      });
    },
    touchHandler (e) {
      lineChart.showToolTip(e, {
        // background: '#7cb5ec',
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      });
    },
    async getbasedata () {
      const that = this
      const date = new Date()
      const userInfo = wx.getStorageSync('userInfo')
      Object.keys(that.userInfo).forEach(e => {
        if (e !== 'datatype') {
          that.userInfo[e] = userInfo[e]
        }
      })
      that.date.year = date.getFullYear()
      that.date.month = date.getMonth() + 1
    },
    async getsystemdongtai () {
      const res = await api.getsystemdongtai(this.userInfo);
      if (res.code === '100') {
        let yejiInfo = {}
        let daysdata = []
        let xianjindata = []
        let kahaodata = []
        res.data.forEach(e => {
          yejiInfo[e.day] = { 'xianjinyeji': e.xianjinyeji, 'kahaoyeji': e.kahaoyeji }
        })
        for (let i = 0; i < new Date().getDate(); i++) {
          daysdata.push(i + 1 + '号')
          if (yejiInfo[i + 1]) {
            xianjindata.push(yejiInfo[i + 1].xianjinyeji)
            kahaodata.push(yejiInfo[i + 1].kahaoyeji)
          } else {
            xianjindata.push(0)
            kahaodata.push(0)
          }
        }
        this.initChart();
      }
    },
    async getUserinfo () {
      const res = await api.getuserinfo({ user_id: this.userid });
      if (res) {
        if (res.code == 100) {// eslint-disable-line
          this.user_info = res.data[0];
        } else {
          Toast(res.msg, 'noicon');
        }
      }
    },
    async getuserdata () {
      const res = await api.getuserdata({ user_id: this.userid });
      if (res) {
        if (res.code == 100) {// eslint-disable-line
          this.userdata = res.data;
        } else {
          Toast(res.msg, 'noicon');
        }
      }
    },
    // 获取图表数据
    async getworkerchanzhiinfo () {
      let userid = wx.getStorageSync('params_userid');
      let nowmonthbeginTime = moment(`${this.getMonthStartDate()} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').unix();
      let nowmonthendTime = moment(`${this.getMonthEndDate()} 23:59:59`, 'YYYY-MM-DD HH:mm:ss').unix();
      let lastmonthbeginTime = moment(`${this.getLastMonthStartDate()} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').unix();
      let lastmonthendTime = moment(`${this.getLastMonthEndDate()} 23:59:59`, 'YYYY-MM-DD HH:mm:ss').unix();
      let nowyearbeginTime = moment(`${this.nowYear}-01-01 00:00:00`, 'YYYY-MM-DD HH:mm:ss').unix();
      let nowyearendTime = moment(`${this.nowYear}-12-31 23:59:59`, 'YYYY-MM-DD HH:mm:ss').unix();
      let lastyearbeginTime = moment(`${this.lastYear}-01-01 00:00:00`, 'YYYY-MM-DD HH:mm:ss').unix();
      let lastyearendTime = moment(`${this.lastYear}-12-31 23:59:59`, 'YYYY-MM-DD HH:mm:ss').unix();
      // let nowHalfyearbeginTime = moment(`${this.nearHalfTime} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').unix();
      // let nowHalfyearendTime = moment(`${this.nowDate} 23:59:59`, 'YYYY-MM-DD HH:mm:ss').unix();
      // let lastHalfyearbeginTime = moment(`${this.lastHalfTime} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').unix();
      // let lastHalfyearendTime = moment(`${this.nearHalfTime} 23:59:59`, 'YYYY-MM-DD HH:mm:ss').unix();
      let radioType = this.radio;
      const res = await api.getcheckemployeesAchievement({ user_id: userid, radioType: radioType, nowmonthbeginTime: nowmonthbeginTime, nowmonthendTime: nowmonthendTime, lastmonthbeginTime: lastmonthbeginTime, lastmonthendTime: lastmonthendTime, nowyearbeginTime: nowyearbeginTime, nowyearendTime: nowyearendTime, lastyearbeginTime: lastyearbeginTime, lastyearendTime: lastyearendTime });
      console.log(res)
      let newyejiInfo = {}
      let lastyejiInfo = {}
      let daysdata = []
      let newxianjindata = []
      let oldxianjindata = []
      if (radioType === '1') { // 本月和上月
        res.nowmonthres.forEach(e => {
          newyejiInfo[e.day] = { 'newxianjindata': e.newxianjindata }
        })
        res.lastmonthres.forEach(e => {
          lastyejiInfo[e.day] = { 'oldxianjindata': e.oldxianjindata }
        })

        for (let i = 0; i < 31; i++) {
          daysdata.push(i + 1 + '号')
          if (newyejiInfo[i + 1]) {
            newxianjindata.push(newyejiInfo[i + 1].newxianjindata)
          } else {
            newxianjindata.push(0)
          }
          if (lastyejiInfo[i + 1]) {
            oldxianjindata.push(lastyejiInfo[i + 1].oldxianjindata)
          } else {
            oldxianjindata.push(0)
          }
        }
      }
      if (radioType === '2') { // 本年和上年
        res.nowyearres.forEach(e => {
          newyejiInfo[e.month] = { 'newxianjindata': e.newxianjindata }
        })
        res.lastyearres.forEach(e => {
          lastyejiInfo[e.month] = { 'oldxianjindata': e.oldxianjindata }
        })

        for (let i = 0; i < 12; i++) {
          daysdata.push(i + 1 + '月')
          if (newyejiInfo[i + 1]) {
            newxianjindata.push(newyejiInfo[i + 1].newxianjindata)
          } else {
            newxianjindata.push(0)
          }
          if (lastyejiInfo[i + 1]) {
            oldxianjindata.push(lastyejiInfo[i + 1].oldxianjindata)
          } else {
            oldxianjindata.push(0)
          }
        }
      }
      this.initChart(daysdata, newxianjindata, oldxianjindata)
    },
    async getshopid () {
      let userid = wx.getStorageSync('params_userid');
      const res = await api.getshopid({ user_id: userid });
      this.shopid = res.data.shopid;
    },
    goSalary () {
      wx.navigateTo({
        url: '/pages/worker/mysalary/mysalary?isparam=1&workername=' + this.user_info.name
      })
    },
    goAttendance () {
      wx.navigateTo({
        url: '/pages/worker/attendanceRecord/attendanceRecord?isparam=1'
      })
    },
    onradioChange (e) {
      console.log(e.mp)
      this.radio = e.mp.detail.value
      if (e.mp.detail.value === '1') {
        this.categories = ['本月', '上月']
        this.getworkerchanzhiinfo()
      }
      if (e.mp.detail.value === '2') {
        this.categories = ['本年', '上年']
        this.getworkerchanzhiinfo()
      }
    },
    // 格式化日期：yyyy-MM-dd
    formatDate (date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();
      if (mymonth < 10) {
        mymonth = '0' + mymonth;
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday;
      }
      return (myyear + '-' + mymonth + '-' + myweekday);
    },
    // 获得某月的天数
    getMonthDays (myMonth) {
      var monthStartDate = new Date(this.nowYear, myMonth, 1);
      var monthEndDate = new Date(this.nowYear, myMonth + 1, 1);
      var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
      return days;
    },
    // 获得本月的开始日期
    getMonthStartDate () {
      var monthStartDate = new Date(this.nowYear, this.nowMonth, 1);
      return this.formatDate(monthStartDate);
    },
    // 获得本月的结束日期
    getMonthEndDate () {
      var monthEndDate = new Date(this.nowYear, this.nowMonth, this.getMonthDays(this.nowMonth));
      return this.formatDate(monthEndDate);
    },
    // 获得上月开始时间
    getLastMonthStartDate () {
      if (this.nowMonth === 0) {
        var lastMonthStartDate = new Date(this.lastYear, this.lastMonth, 1);
      } else {
        var lastMonthStartDate = new Date(this.nowYear, this.lastMonth, 1);
      }
      return this.formatDate(lastMonthStartDate);
    },
    // 获得上月结束时间
    getLastMonthEndDate () {
      if (this.nowMonth === 0) {
        var lastMonthEndDate = new Date(this.lastYear, this.lastMonth, this.getMonthDays(this.lastMonth));
      } else {
        var lastMonthEndDate = new Date(this.nowYear, this.lastMonth, this.getMonthDays(this.lastMonth));
      }
      return this.formatDate(lastMonthEndDate);
    },
    // 查看客户
    async viewCustomers () {
      let userid = wx.getStorageSync('params_userid');
      let res = await api.getviewcustomer({ user_id: userid });
      console.log(res)
      if (res.code === '100') {
        this.guestnum = res.data.length;
      }
    },
    goViewCustomers () {
      if (!this.guestnum) {
        Toast('暂无服务客户！');
        return false
      } else {
        wx.navigateTo({
          url: '/pages/worker/viewguester/viewguester'
        })
      }
    },
    goserviceguest (money, st, tp) {
      console.log(money)
      if (money < 0) {
        Toast('暂无业绩！');
        return false
      } else {
        if (tp == 1) {
          wx.setStorageSync('service_xianjin', true)
        } else {
          wx.setStorageSync('service_xianjin', false)
        }
        if (st == 1) {
          wx.setStorageSync('service_start', moment().startOf('day'))
          wx.setStorageSync('service_end', moment().endOf('day'))
        } else if (st == 2) {
          wx.setStorageSync('service_start', moment().startOf('month'))
          wx.setStorageSync('service_end', moment().endOf('month'))
        } else {
          wx.setStorageSync('service_start', moment().startOf('year'))
          wx.setStorageSync('service_end', moment().endOf('year'))
        }
        wx.navigateTo({
          url: '/pages/worker/serviceinfo/serviceinfo'
        })
      }
    }
  },
  created () {
    wx.setNavigationBarTitle({
      title: '查看员工'
    })
  },
  onShow () {
    wx.setNavigationBarTitle({
      title: '查看员工'
    })
    this.userid = wx.getStorageSync('params_userid')
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 40rpx;
}
.container .header {
  width: 100%;
  background: rgba(255, 68, 68, 1);
  opacity: 1;
  padding: 36rpx 50rpx;
}
.header .user_pic {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.header .user_pic img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.header .user_info label {
  display: block;
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.header .user_info .user_name {
  margin-bottom: 10rpx;
}
.check_tab {
  width: 100%;
  height: 176rpx;
  padding: 26rpx 0;
  position: relative;
  background: #fff;
  margin-top: 16rpx;
}
.check_tab .tab_details {
  width: 256rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  border-right: 1rpx solid rgba(153, 153, 153, 0.1);
}
.check_tab .tab_details:last-child {
  border: none;
}
.check_tab .tab_details span {
  display: block;
}
.check_tab .tab_details .tab_icons {
  width: 92rpx;
  height: 92rpx;
  margin: 0 auto;
}
.check_tab .tab_details .tab_icons.cqjl {
  background: url(http://mytimg.178mr.com/cqjl@2x.png) no-repeat center center;
  background-size: 100%;
}
.check_tab .tab_details .tab_icons.fwkh {
  background: url(http://mytimg.178mr.com/fwkh@2x.png) no-repeat center center;
  background-size: 100%;
}
.check_tab .tab_details .tab_icons.gzmx {
  background: url(http://mytimg.178mr.com/gzmx@2x.png) no-repeat center center;
  background-size: 100%;
}
.check_tab .line {
  position: absolute;
  width: 2rpx;
  height: 72rpx;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: rgba(153, 153, 153, 1);
}
.panel {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-top: 18rpx;
  padding-top: 28rpx;
}
.panel .panel_header {
  padding-bottom: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  padding-left: 32rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
}
.panel .panel_header .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.panel_ul {
  width: 100%;
}
.panel_ul li {
  font-size: 28rpx;
  font-weight: 400;
  padding: 30rpx 0;
  color: rgba(102, 102, 102, 1);
  border-right: 1rpx solid rgba(153, 153, 153, 0.1);
}
.panel_ul li:last-child {
  border: none;
}
.panel_ul li span {
  display: block;
  width: 100%;
}
.panel_ul li .left {
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.panel_ul li .right {
  text-align: center;
  font-size: 30rpx;
  font-weight: 400;
  color: rgba(255, 177, 153, 1);
  margin-bottom: 10rpx;
}
.canvas {
  width: 100%;
  height: 400rpx;
  background: #fff;
}
.radiochoose {
  width: 100%;
  overflow: hidden;
  background: #fff;
  margin-top: 18rpx;
  padding: 18rpx 0;
  font-size: 28rpx;
}
.ellipse {
  position: relative;
  width: 100%;
  height: 260rpx;
  padding: 0 76rpx;
  background: #fff url(http://mytimg.178mr.com/ellipse.png) 50% 100%/150%
    no-repeat;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}
.ellipse .ellipse_details {
  position: absolute;
  padding: 34rpx 0;
  padding-left: 242rpx;
  top: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 692rpx;
  height: 180rpx;
  background: url(http://mytimg.178mr.com/checkworker.png) no-repeat;
  background-size: 100%;
}
.ellipse .ellipse_details .user_pic {
  position: absolute;
  left: 50rpx;
  top: -56rpx;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.ellipse .ellipse_details .user_pic img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.ellipse .ellipse_details .user_info label {
  display: block;
}
.ellipse .ellipse_details .user_info .user_name {
  margin-bottom: 10rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(255, 68, 68, 1);
}
.ellipse .ellipse_details .user_info .user_position {
  font-size: 28rpx;
  color: rgba(117, 117, 117, 1);
}
.panel_title {
  width: 100%;
  text-align: center;
  font-size: 36rpx;
  font-weight: 800;
}
</style>
<style>
.van-radio__icon--checked {
  color: #ff4444 !important;
}
.van-radio {
  flex: 1;
  float: left;
  font-size: 24rpx;
}
.van-radio__label {
  font-size: 24rpx !important;
}
/** 未选中状态 */
radio .wx-radio-input {
  width: 32rpx;
  height: 32rpx;
}

/** 选中状态 */
radio .wx-radio-input.wx-radio-input-checked {
  width: 32rpx;
  height: 32rpx;
  background: #ff4444 !important;
  border-color: #ff4444 !important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  width: 32rpx;
  height: 32rpx;
  background: #ff4444 !important;
}
</style>
